<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
			include "auth.php";
			include "mapControl.php";
			

		?>
<html lang="en">
	<head>
		<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta http-equiv="content-language" content="de" />
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
		<meta name="DC.language" content="de" />
		<link type="text/css" rel="stylesheet" href="/CityGuide/css/jquery-mobile-1.0/jquery.mobile.structure-1.1.1.min.css" />
		<link type="text/css" rel="stylesheet" href="/CityGuide/css/jquery-mobile-1.0/jquery.mobile.theme-1.1.1.min.css" />
		<link type="text/css" rel="stylesheet" href="/CityGuide/css/jquery-mobile-1.0/jquery.mobile-1.1.1.min.css" />
		<link type="text/css" rel="stylesheet" href="/CityGuide/css/mobile.css" />
		<link type="text/css" rel="stylesheet" href="/CityGuide/css/cityguide.css" />
		<script type="text/javascript" src="/CityGuide/js/modernizr-2.0.6/modernizr.min.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
		<script type="text/javascript" src="/CityGuide/js/jquery-1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="/CityGuide/js/jquery-mobile/jquery.mobile-1.1.1.min.js"></script>
		<script type="text/javascript" src="/CityGuide/js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
		<script type="text/javascript" src="/CityGuide/js/demo.js"></script>
		<script type="text/javascript" src="/CityGuide/ui/jquery.ui.map.js"></script>
		<script type="text/javascript" src="/CityGuide/ui/jquery.ui.map.services.js"></script>
		<script type="text/javascript" src="/CityGuide/ui/jquery.ui.map.extensions.js"></script>
		<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js" type="text/javascript"></script>
		<style>

      .phoneyHeader {
        text-shadow: 0 -1px 0 #ddd;
        color: #000;
        font-family: Verdana;
        font-size: 11px;
        font-weight: bold;
        margin:0;
        padding:0;
      }
      .phoneyText{
      	color: #000;
        font-family: Verdana;
        font-size: 10px;
        width:200px;
      }
			
		</style>
		<script type="text/javascript">
			
						

			
			var ways = [<?php getAllStations(); ?>];
			

			var  locationMarker = new  google.maps.MarkerImage('/CityGuide/img/icons/star-3.png',
		                    	  new google.maps.Size(32,37),
		                     	  new google.maps.Point(0,0),
		                     	  new google.maps.Point(19,35));
		                     	  
		     
		
			////////////////////////////////////////////////////////////
			
			function lets(pos){
				
				var mobileDemo = {
						'center' : pos.coords.latitude + ',' + pos.coords.longitude,
						'zoom' : 10
					};
				
				 var map = $('#map_canvas').gmap({
						'center' : mobileDemo.center,
						'zoom' : mobileDemo.zoom,
						'disableDefaultUI' : false,
						'navigationControl': true, 
						'streetViewControl': false,
						'mapTypeControl': false,
						'panControl': false,
						'zoomControlOptions': { 'style': google.maps.ZoomControlStyle.SMALL, 'position': google.maps.ControlPosition.TOP_LEFT },
						'callback' : function(map) {
							

							var self = this;
							
							var waypts = [];

			                for (var i in ways) {
			                    waypts.push({
			                        location: ways[i].location,
			                        stopover:true
			                    });
			                }

							self.displayDirections({ 'origin': pos.coords.latitude + ',' + pos.coords.longitude, 
													 'destination': pos.coords.latitude + ',' + pos.coords.longitude,
													  'waypoints': waypts,
													  'optimizeWaypoints': true,
													 'travelMode': google.maps.DirectionsTravelMode.WALKING }, 
													 { 'panel': document.getElementById('directions'), 'suppressMarkers':true}, function(response, status) {
								//( status === 'OK' ) ? $('#results').show() : console.log("ERROR ##########");
								//console.log("result: " , response.routes[ 0 ].legs[ 0 ]);
								var leg = response.routes[0].legs[0];
								console.log(leg);
								$('#map_nav_detail').attr('href',"dialog.php?dist=" + leg.distance.text + "&dur=" + leg.duration.text );
								
								self.addMarker({ 
									    'current': true,										
									    'icon': locationMarker,
										'position': new google.maps.LatLng(leg.start_location.lat(),leg.start_location.lng()), //lat lon
										'bounds': true
									}).click(function() {
													self.openInfoWindow({ 'content': "Ich" }, this);
									});

									self.find('markers', {'property': 'foo', 'value':'bar'}, function(marker, found){
										if(marker.current){
											marker.setAnimation(google.maps.Animation.BOUNCE);
										}
									});
			
									var jsonFile =  <?php echo '"/CityGuide/data/' . strtolower(str_replace(' ', '_', $_SESSION['selectedTour'])).'.json"'; ?>;
									$.getJSON( jsonFile, function(data) { 
										$.each( data.markers, function(i, marker) {
											//console.log(i, marker);
											var  interestMarker = new  google.maps.MarkerImage('/CityGuide/img/icons/loc-' + (i+1) + '.png',
				                    				new google.maps.Size(32,37),
				                     				new google.maps.Point(0,0),
				                     				new google.maps.Point(19,35)
				                 			);
				                 			
				                 			

											$('#map_canvas').gmap('addMarker', { 
												'icon': interestMarker,
												'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
												'bounds': true
											}).click(function() {
												$('#map_canvas').gmap('openInfoWindow', { 'content': '<h5 class="phoneyHeader">' + marker.title + '</h5><p class="phoneyText">' + marker.content + '</p>' }, this);
											});
											
											
										});
									});
								});
							}
						});
						
				
				 $('body').removeClass('ui-loading');
			}

			$('#map_page').live('pagecreate', function() {
				
				$('body').addClass('ui-loading');
					
					var gl = null;
					try {
						  if(typeof(navigator.geolocation) == 'undefined'){
						    gl = google.gears.factory.create('beta.geolocation');
						    
						  } else {
						    gl = navigator.geolocation;
						  }
						}catch(e){}
						 
						if (gl) {
							 gl.getCurrentPosition(function displayPosition(position) {
							 lets(position);
							 
							},
							 
							function displayError(positionError) {
							  alert("error");
							});
						} else {  
						  alert("I'm sorry, but geolocation services are not supported by your browser.");  
						}
						
		
			});
			

		</script>
	</head>
	<body>
		<div id="map_page" data-role="page" data-position="fixed">
			<div data-role="content" style="padding:0px!important">
				<!-- <div class="ui-bar-c ui-corner-all ui-shadow" style="padding-top:1em;"> -->
				<div id="map_canvas" style="height:530px"></div>
			</div>
			<div data-role="footer" class="nav-glyphish-example" data-fullscreen="true" data-position="fixed">
				<div data-role="navbar" class="nav-glyphish-example" data-grid="b">
				<ul>
					<li><a href="logout.php" id="map_nav_login" data-icon="custom">Logout</a></li>
					<li><a href="select.php" id="map_nav_select" data-icon="custom">Select</a></li>
					<li><a href="dialog.php" id="map_nav_detail" data-icon="custom">Detail</a></li>
				</ul>
				</div>
			</div>
		</div>
<?php
	include "../includes/footer.php";
?>
